<template>
	<div class="app-full-screen">
		<span :title="$t('components.scren.all')"
			><Icon
				:type="fullScren == true ? 'ios-contract' : 'ios-expand'"
				size="15"
				@click="handleScreen"
		/></span>
	</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
	name: 'FullScren',
	components: {},
	setup() {
		const fullScren = ref<boolean>(false);
		const handleScreen = () => {
			if (fullscreenEnable()) {
				exitFullScreen();
			} else {
				const viewElement: any = document.querySelector(
					'.app-content .app-nav-pos'
				);
				if (viewElement) {
					elementFullscreen(viewElement);
				}
			}
		};

		//浏览器判断是否全屏
		const fullscreenEnable = () => {
			const isFullscreen =
				(document as any).isFullScreen ||
				(document as any).mozIsFullScreen ||
				(document as any).webkitIsFullScreen;
			return isFullscreen;
		};

		//监控F11
		const keyDown = ($event: any) => {
			if ($event.keyCode == 122) {
				$event.returnValue = false;
				fullScren.value = !fullScren;
				handleScreen();
			}
		};

		//浏览器全屏
		const reqFullScreen = () => {
			if ((document as any).documentElement.requestFullScreen) {
				(document as any).documentElement.requestFullScreen();
			} else if ((document as any).documentElement.webkitRequestFullScreen) {
				(document as any).documentElement.webkitRequestFullScreen();
			} else if ((document as any).documentElement.mozRequestFullScreen) {
				(document as any).documentElement.mozRequestFullScreen();
			}
		};

		//浏览器退出全屏
		const exitFullScreen = () => {
			if ((document as any).documentElement.requestFullScreen) {
				(document as any).exitFullScreen();
			} else if ((document as any).documentElement.webkitRequestFullScreen) {
				(document as any).webkitCancelFullScreen();
			} else if ((document as any).documentElement.mozRequestFullScreen) {
				(document as any).mozCancelFullScreen();
			}
		};

		//指定节点全屏
		const elementFullscreen = (element: any) => {
			if (element.requestFullscreen) {
				element.requestFullscreen();
			} else if (element.mozRequestFullScreen) {
				element.mozRequestFullScreen();
			} else if (element.msRequestFullscreen) {
				element.msRequestFullscreen();
			} else if (element.webkitRequestFullscreen) {
				element.webkitRequestFullScreen();
			}
		};

		//监控全屏状态和键盘
		window.onresize = function () {
			if (fullscreenEnable()) {
				fullScren.value = true;
			} else {
				fullScren.value = false;
			}
		};
		window.addEventListener('keydown', keyDown, true);

		return {
			handleScreen,
			fullscreenEnable,
			keyDown,
			reqFullScreen,
			exitFullScreen,
			elementFullscreen,
			fullScren,
		};
	},
});
</script>
